<template>
  <a-menu
    class="layout-sider-menu"
    mode="inline"
    theme="dark"
    :openKeys="openKeys"
    :selectedKeys="selectedKeys"
    @openChange="onOpenChange"
  >
    <template v-for="item in menus">
      <sider-menu-item
        v-if="item.children && item.children.length > 0"
        :key="item.path"
        :menu-info="item"
      />
      <a-menu-item
        v-else
        :key="item.path"
      >
        <router-link
          :to="item.path"
          v-slot="{ navigate }"
          custom
        >
          <a
            v-if="/^(https?:|mailto:|tel:|\/\/)/.test(item.path)"
            :href="item.path"
            target="_blank"
          >
            <a-icon
              v-if="item.meta && item.meta.icon"
              :type="item.meta.icon"
            />
            <span>{{ item.title || (item.meta && item.meta.title) }}</span>
          </a>
          <a
            v-else
            @click="navigate"
            href="javacript:void(0);"
          >
            <a-icon
              v-if="item.meta && item.meta.icon"
              :type="item.meta.icon"
            />
            <span>{{ item.title || (item.meta && item.meta.title) }}</span>
          </a>
        </router-link>
      </a-menu-item>
    </template>
  </a-menu>
</template>

<script>
import SiderMenuItem from './SiderMenuItem.vue'

export default {
  components: {
    SiderMenuItem
  },
  props: {
    menus: {
      type: Array,
      required: true
    },
    collapsed: {
      type: Boolean,
      required: false,
      default: false
    }
  },
  data() {
    return {
      openKeys: [],
      selectedKeys: [],
      cachedOpenKeys: []
    }
  },
  computed: {
    /**
     * 获取所有一级菜单
     */
    rootSubmenuKeys: (vm) => {
      const keys = []
      vm.menus.forEach((item) => keys.push(item.path))
      return keys
    }
  },
  watch: {
    collapsed(val) {
      if (val) {
        this.cachedOpenKeys = this.openKeys.concat()
        this.openKeys = []
      } else {
        this.openKeys = this.cachedOpenKeys
      }
    },
    $route() {
      this.updateMenu()
    }
  },
  methods: {
    /**
     * 只显示当前父级菜单，点击其他菜单隐藏当前
     */
    onOpenChange(openKeys) {
      const latestOpenKey = openKeys.find((key) => !this.openKeys.includes(key))
      if (!this.rootSubmenuKeys.includes(latestOpenKey)) {
        this.openKeys = openKeys
      } else {
        this.openKeys = latestOpenKey ? [latestOpenKey] : []
      }
    },

    /**
     * 更新菜单，选中当前页
     */
    updateMenu() {
      const { path, matched, meta } = this.$route
      const routes = matched.concat()
      const lastPath = routes[routes.length - 1].path
      const currPath = meta && meta.highlight ? meta.highlight : path
      const openKeys = []

      // 处理父级的展开
      if (lastPath.indexOf('/:') > -1) {
        openKeys.push(lastPath.split('/:')[0])
      } else {
        routes.pop()
      }

      routes.forEach((item) => {
        openKeys.push(item.path)
      })
      this.selectedKeys = [currPath]
      this.collapsed ? (this.cachedOpenKeys = openKeys) : (this.openKeys = openKeys)
    }
  },
  mounted() {
    this.updateMenu()
  }
}
</script>

<style lang="less">
.layout-sider-menu {
  &.ant-menu-dark {
    .ant-menu-inline.ant-menu-sub {
      box-shadow: none;
    }

    .ant-menu-item {
      margin-bottom: 0;
    }

    .ant-menu-submenu-open {
      background-color: @menuSubBg;
    }
  }

  &.ant-menu-inline-collapsed {
    & > .ant-menu-item,
    & > .ant-menu-submenu .ant-menu-submenu-title {
      padding: 0 19px !important;
    }

    &.ant-menu-dark {
      .ant-menu-submenu-selected {
        background-color: @menuSubBg;
      }
    }
  }
}
</style>
